<template>
    <div>
        
        <div class="banner-login">

            <top-carousel 
                :banner-list="topBannerList"
            >
            </top-carousel>

            <div class="login-parent">

                <div class="login-box" v-show="!loginStatus">

                    <div class="top-box">
                        <div 
                            v-for="(item,index) in loginTypeList"
                            :key="index"
                            class="login-type"
                        >
                            <a 
                                :class="[loginType == item.key ? 'bht_active' : '']" 
                                @click="chageLoginType(item)"
                            >
                                {{item.label}}
                            </a>
                            <span v-if="item.lineShow">|</span>
                        </div>
                    </div>

                    <div class="bottom-box">
                        <div class="content">

                            <password-login v-if="loginType === 'password'"></password-login>

                            <phone-login v-if="loginType === 'phone'"></phone-login>

                            <wx-login v-if="loginType === 'wx'"></wx-login>

                            <div class="login-box-btns" v-if="['password', 'phone'].includes(loginType)">
                                <el-button type="text">忘记密码</el-button>
                                <el-button type="text">用户注册</el-button>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="logined" v-show="loginStatus">

                    <div class="top-box">
                        用户中心
                    </div>

                    <div class="bottom-box">
                        <div class="content">
                            <div class="user">
                                欢迎 {{ Object.keys(getUserinfo).length > 0 ? getUserinfo.loginUser.mobile : ''}} 来到工程保函通
                            </div>

                            <div class="logined-btns">
                                <el-button type="primary" @click="myGuaranteeHandler">我的保函</el-button>
                                <el-button type="primary" @click="selectGuaranteeHandler">审请保函</el-button>
                            </div>

                            <div class="layout">
                                <el-button type="text" @click="layoutHandler">退出登录</el-button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        
        <handling-flow></handling-flow>

        <apply-guarante></apply-guarante>

        <article class="article-more">
            <platform-advantage></platform-advantage>

            <guarante-enquiry
                :bhlx-list="bhlxList"
                :chjg-list="chjgList"
                :is-login="loginStatus"
            >
            </guarante-enquiry>

            <bottom-carousel></bottom-carousel>
        </article>

        <partners></partners>



        <my-dialog
            v-model="selectGuaranteeDialogStatus"
            :title="'选择保函种类'"
            :width="'1100px'"
            :showclose="true"
            :top="'80px'"
        >
            <select-guarantee
                v-if="selectGuaranteeDialogStatus"
                :bhlx-list="bhlxList"
                :chjg-list="chjgList"
            >
            </select-guarantee>
        </my-dialog>
        

    </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions} from 'vuex';

import commonType from '@mixins/commonType'

//顶部banner
import topCarousel from '@/components/home/topCarousel'

//登录
import passwordLogin from '@/components/home/passwordLogin'
import phoneLogin from '@/components/home/phoneLogin'
import wxLogin from '@/components/home/wxLogin'


//办理流程
import handlingFlow from '@/components/home/handlingFlow'

//申请保函
import applyGuarante from '@/components/home/applyGuarante'

//平台优势
import platformAdvantage from '@/components/home/platformAdvantage'

//一键询价
import guaranteEnquiry from '@/components/home/guaranteEnquiry'

//底部banner
import bottomCarousel from '@/components/home/bottomCarousel'

//合作伙伴
import partners from '@/components/home/partners'

//选择保函
import selectGuarantee from '@/components/guarantee/selectGuarantee'

export default {
    layout:'def-bht',
    name: '',
    components: {
        topCarousel,
        
        passwordLogin,
        phoneLogin,
        wxLogin,

        handlingFlow,
        applyGuarante,
        platformAdvantage,
        guaranteEnquiry,
        bottomCarousel,
        partners,

        selectGuarantee,
    },

    mixins: [commonType],

    data () {
        return {
            topBannerList:[],

            loginType:'password',

            loginTypeList:[
                {
                    label:'密码',
                    key:'password',
                    lineShow:true,
                },
                {
                    label:'手机号',
                    key:'phone',
                    lineShow:true,
                },
                {
                    label:'微信扫码',
                    key:'wx',
                    lineShow:false,
                },
            ],

            selectGuaranteeDialogStatus:false,
        }
    },
    computed: {
        ...mapGetters({
            getUserinfo: 'userinfo/getUserinfo',
            loginStatus: 'userinfo/loginStatus',
        }),

    },
    watch: {

    },
    methods: {
        ...mapMutations({
            userinfoUpdata: 'userinfo/userinfoUpdata', 
        }),


        getTopBannerList(){
            this.$get(this.$store.getters['api/webinfo'].adlist,{
                adtype:'1'
            },(data)=>{
                this.topBannerList = data;
            })
        },


        chageLoginType(item) {
            this.loginType = item.key
        },

        //退出登录
        layoutHandler(){
            this.$post(this.$store.getters['api/client'].logout,{},(data)=>{
                showMsg('退出成功', 'success');
                this.userinfoUpdata({});
                window.localStorage.clear();
                window.sessionStorage.clear();
            })
        },

        myGuaranteeHandler(){
            this.goto({
                path:'/sys/ordermg/list',
            })
        },

        selectGuaranteeHandler(){
            this.selectGuaranteeDialogStatus =true;
        }
    },
    created () {
    },
    mounted () {
        this.getTopBannerList();
    },
}
</script>
<style lang="scss" scoped>
    @import '@css/var.scss';

    .article-more{
        background: url('@images/homePage/advantage/advantage-bg.png') no-repeat;
        padding-bottom: 70px;
    }

    .banner-login{
        position: relative;

        .login-parent{
            width: 1200px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right:0;
            margin: 0 auto;
            
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .login-box , .logined{
                z-index: 99;
                width: 350px;
                height: 350px;
                background: white;
            }


            .top-box {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 60px;
                border-bottom: 1px solid $infoColor3;

                .login-type{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 20px;

                    span{
                        font-size: 20px;
                        padding: 0 16px;
                    }

                    a{
                        cursor: pointer;   
                    }

                    a:hover { 
                        color: $primaryColor; 
                    }
                }

            }

            .logined .top-box{
                font-size: 18px;
                color: $primaryColor; 
            }

            .bottom-box{

                height: calc(100% - 60px);
                padding: 0 20px;
                display: flex;
                align-items: center;

                .content{
                    width: 100%;
                }


                .login-box-btns{
                    text-align: right;
                    .el-button{
                        padding-bottom: 0px !important;
                    }
                }

                .user{
                    font-size: 18px;
                    text-align: center;
                    padding: 40px 0 50px;
                }
                
                .logined-btns{
                    text-align: center;
                    padding: 0 0 52px 0;
                }

                .layout{
                    text-align: right;
                    .el-button{
                        padding: 0px !important;
                    }
                }

            }

        }
    }

    .bht_active{
        color: $primaryColor;
    }



</style>
